<template>
<!-- 这是个人信息编辑页面 顶部栏的组件封装 -->
<!-- 
     顶部栏的封装  使用display:flex  进行页面的占位分布 
     点击 < 会回退到个人中心页    点击首页字体图标会跳转到首页
 -->
  <div class="header">
    <div>
<!-- 匿名插槽，后期为将内容放置在指定插槽中   需将匿名插槽改为有名插槽  给元素添加name属性 -->
      <slot name="left"></slot>
    </div>
    <div>{{title}}</div>
    <div>
      <slot name="right"></slot>
    </div>
   
  </div>
</template>
<script>
export default {
  props:['title']
}
</script>
<style lang="less" scoped>
.header{
  padding: 0 10px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
}

</style>